import {
  inspectionOKRatio,
  inspectionDivisionBaseRatio,
  inspectionBaseMaterialRatio,
  inspectionJumpMaterial,
  inspectionJumpMaterialSupplier,
  inspectionDivisionMrbRatio,
  inspectionDivisionSupplierMrbRatio,
  inspectionDivisionBaseMrbRatio,
  inspectionSupplierMrbRatio,
  inspectionMaterialMrbRatio,
  inspectionFinishRateByExtra,
  baseInsFinishRateByExtra,
  supplierInsFinishRateByExtra,
  materialLevel,
  materialInsFinishRateByExtra,
} from "@/api/inspectionManagement/inspectionManagement";
const industryColor = {
  type: "linear",
  x: 1,
  y: 0,
  x2: 1,
  y2: 1,
  colorStops: [
    {
      offset: 0,
      color: "#6CB5EB",
    },
    {
      offset: 1,
      color: "rgba(9,36,83,0.27)",
    },
  ],
};
const echarts = require("echarts");
export default {
  data() {
    return {
      currentDeepEchart: null,
      materialRatioList: null,
      materialRatioList7: null,
      materialRatioList7_2: null,
      materialRatioList8: null,
      materialRatioList8_2: null,
      materialRatioList9: null,
      materialRatioList9_2: null,
      deepParams: null,
      deep2Params: null,
      echartDeep: null,
      echartDeep2: null,
      echart1: null,
      echart2: null,
      echart3: null,
      echart4: null,
      echart5: null,
      echart6: null,
      echart7: null,
      echart8: null,
      echart9: null,
      divisionRatioList: [],
      optionDeep2: {
        color: ["#e0cd67"], // 深蓝色和黄色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "6%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: true, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            maxValueSpan:4,
            minValueSpan:4,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#ccc", // 设置 x 轴线的颜色为红色
              },
            },
            axisLabel: {
              interval: 0,
              width: "120",
              overflow: "break",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // min: 0,
            // max: 100,
            axisLine: {
              show:false,
              lineStyle: {
                color: "#ccc", // 设置 x 轴线的颜色为红色
                type:'solid'
              },
            },
            splitLine :{
              lineStyle:{
                  color:'#ccc',
                  type:'dashed'//虚线
              },
              // show: true //隐藏
            }
          },
        ],
        series: [
          {
            name: "占比",
            type: "bar",
            barWidth: 25,

            data: [],
          },
        ],
      },
      optionDeep: {
        color: ["#3e9bee"], // 深蓝色和黄色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "6%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: true, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            maxValueSpan:4,
            minValueSpan:4,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#ccc", // 设置 x 轴线的颜色为红色
              },
            },
            axisLabel: {
              interval: 0,
              width: "120",
              overflow: "break",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // min: 0,
            // max: 100,
            axisLine: {
              show:false,
              lineStyle: {
                color: "#ccc", // 设置 x 轴线的颜色为红色
                type:'solid'
              },
            },
            splitLine :{
              lineStyle:{
                  color:'#ccc',
                  type:'dashed'//虚线
              },
              // show: true //隐藏
            },
            
          },
        ],
        series: [
          {
            name: "占比",
            type: "bar",
            barWidth: 25,

            data: [],
          },
        ],
      },
      option1: {
        color: ["#FFD700"], // 深蓝色和黄色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        title: {
          text: "选定时间检验合格报检批次 /SAP 总报检批次",
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            data: [],
            min: 0,
            max: 100,
            axisTick: {
              alignWithLabel: true,
            },
            show: false,
            axisLine: {
              lineStyle: {
                color: "#fff", // 设置 x 轴线的颜色为红色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#fff", // 设置 x 轴线的颜色为红色
              },
            },
            axisLabel: {
              color: "#fff",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "16",
              },
              formatter: "{value}%",
            },
            data: [],
          },
        ],
        yAxis: [
          {
            name: "占比",
            type: "bar",
            barWidth: "20%",
            data: [],
            showBackground: true,
          },
        ],
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
            maxValueSpan: 2,
            yAxisIndex: 0,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
      },
      option2: {
        color: ["#2CD9C5"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "-5%",
          top: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            data: [],
            min: 0,
            max: 100,
            axisTick: {
              alignWithLabel: true,
            },
            show: false,
            axisLine: {
              lineStyle: {
                color: "#fff", // 设置 x 轴线的颜色为红色
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "16",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#fff", // 设置 x 轴线的颜色为红色
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "16",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "16",
              },
              formatter: "{value}%",
            },
            data: [],
          },
        ],
        series: [
          {
            name: "占比",
            type: "bar",
            barWidth: "20%",
            data: [],
            showBackground: true,
            // label: {
            //   show: true,
            //   position: 'right',
            //   formatter: '{c}%',
            //   color: '#fff',
            // },
          },
        ],
      },
      option3: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // title: {
        //   text: "完成检验判定结果流程数量/总发起报检流程数量",
        //   textStyle: {
        //     fontSize: 14,
        //     color: "#fff",
        //   },
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],

        series: [
          {
            z: 10,
            // name: "产业结构",
            // 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项
            type: "pictorialBar",
            data: [],
            symbol:
              "image://",
            symbolSize: [61, 64],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: "red",
              },
            },
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              formatter: "{c}%",
              color: "#fff",
              fontSize: "12px",
            },
          },
        ],
      },
      option4: {
        color: ["#FFD700"], // 深蓝色和黄色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: 30,
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
            maxValueSpan: 3,
            minValueSpan: 3,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
          
              fontSize: 11,
              interval: 0,
              width: "90",
              overflow: "break",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 20,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
               color: "#fff",
          
              fontSize: 16,
              formatter: "{value} %",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "占比",
            type: "bar",
            barWidth: 9,
            data: [],
            itemStyle: {
              //柱子左面
              normal: {
                // 重要的是color配置：线性渐变， 从上往下
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#57AFFF",
                    },
                    {
                      offset: 1,
                      color: "#1E91FA",
                    },
                  ],
                },
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            name: "占比",
            tooltip: {
              show: true,
              padding: 100,
              position: [-10, "50%"],
              borderWidth: 100,
            },
            type: "bar",
            barWidth: 13,
            barCategoryGap: "60%",
            itemStyle: {
              //柱子右面
              normal: {
                // 重要的是color配置：线性渐变， 从上往下
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0E82EC",
                    },
                    {
                      offset: 1,
                      color: "#0672D5",
                    },
                  ],
                },
                borderWidth: 0.3,
                borderColor: "rgba(9, 36, 83, 0.1)",
              },
            },
            data: [],
            // 间隔为0
            barGap: 0,
            z: 5,
          },
          {
            z: 10,
            name: "占比",
            // 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项
            type: "pictorialBar",
            symbolPosition: "end",
            data: [],
            symbol: "diamond",
            symbolOffset: [0, -10],
            symbolRotate: 90,
            symbolSize: [13.5, 19.6],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: "rgba(124, 201, 250, 1)",
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 10,
            name: "占比",
            // 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项
            type: "pictorialBar",
            symbolPosition: "start",
            data: [],
            symbol:
              "image://",
            symbolOffset: [0, 10],
            symbolSize: [56, 81],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: "red",
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 10,
            name: "占比",
            // 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项
            type: "pictorialBar",
            symbolPosition: "start",
            data: [],
            symbol:
              "image://",
            symbolOffset: [0, 6],
            symbolSize: [56, 29],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: "red",
              },
            },
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
              color: "#2D99FF",
              fontSize: "16px",
              fontWeight: "bold",
            },
          },
        ],
      },
      option5: {
        color: ["#FF6347"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: 30,
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
            maxValueSpan: 3,
            minValueSpan: 3,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
          
              fontSize: 11,
              interval: 0,
              width: "90",
              overflow: "break",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              show: false,
            },
            axisLabel: {
               color: "#fff",
          
              fontSize: 16,
              formatter: "{value}%",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "占比",
            barWidth: "20%",
            type: "pictorialBar",
            symbol: "rich",
            symbolRepeat: true,
            symbolSize: [32, 14],
            symbolMargin: 1,
            data: [],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "rgba(44, 217, 197, 1)" },
                { offset: 1, color: "rgba(136, 252, 244, 1)" },
              ]),
            },
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
              color: "#2D99FF",
              fontSize: "16px",
              fontWeight: "bold",
            },
          },
        ],
      },
      option6: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: 30,
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
            maxValueSpan: 3,
            minValueSpan: 3,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
          
              fontSize: 11,
              interval: 0,
              width: "90",
              overflow: "break",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "rgba(255, 231, 0, 1)",
                fontSize: "16px",
                fontWeight: "bold",
              },
              formatter: "{value}%",
            },
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              show: false,
            },
            axisLabel: {
               color: "#fff",
          
              fontSize: 16,
              formatter: "{value}%",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            // 真实数据
            data: [],
            tooltip: {
              show: false,
            },
            // name: '顶部圆片 （柱形图顶部）',
            //symbol标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond','pin','arrow', 'none' (默认为圆形)
            type: "pictorialBar", //指定类型
            symbolSize: [26, 16], //指定大小，[宽,高]
            symbolOffset: [0, -7],
            z: 12,
            zlevel: 1,
            itemStyle: {
              color: "rgba(255, 243, 122, 1)",
            },
            symbolPosition: "end",
          },

          {
            // name: '底部圆片（柱形图底部）',
            type: "bar",

            z: 16,
            silent: true,
            barWidth: 26,
            barGap: "-100%",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(20,82,130, 0.4)",
            },
            name: "占比",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0, // 设置渐变方向从左到右
                    color: "RGBA(254, 230, 1, 1)",
                  },
                  {
                    offset: 0.5, // 设置渐变方向从右到左
                    color: "RGBA(206, 190, 31, 1)",
                  },
                  {
                    offset: 1, // 设置渐变方向从右到左
                    color: "RGBA(239, 217, 10, 1)",
                  },
                ]),
              },
            },
            // 真实数据
            data: [],
          },
          // {
          //   // 真实数据
          //   data: [],
          //   // name: '顶部圆片 （柱形图顶部）',
          //   //symbol标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond','pin','arrow', 'none' (默认为圆形)
          //   type: "pictorialBar", //指定类型
          //   symbolSize: [26, 16], //指定大小，[宽,高]
          //   symbolOffset: [0, -7],
          //   z: 12,
          //   zlevel: 1,
          //   itemStyle: {
          //     color: "rgba(255, 243, 122, 1)",
          //   },
          //   symbolPosition: "start",
          // },
        ],
      },
      option7: {
        color: ["#FFD700"], // 深蓝色和黄色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: 30,
          containLabel: true,
        },
        dataZoom: {
          type: "inside", // 滑动条型数据区域缩放组件
          show: true, // 是否显示组件(用于 x 轴使用)
          start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
          end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
          // height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
          handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
          zoomOnMouseWheel: false, // 滚轮是否触发缩放
          moveOnMouseMove: true, // 鼠标滚轮触发滚动
          moveOnMouseWheel: true,
          maxValueSpan: 3,
          minValueSpan: 3,
          handleStyle: {
            // color: '#fff', // 图形的颜色
            // borderColor: 'red', // 图形的描边颜色
            // borderWidth: 1, // 描边线宽。为 0 时无描边
            borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
          }, // 两侧缩放手柄的样式配置
          showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
          bottom: 0,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // min: 0,
            // max: 100,
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            z: 10,
            name: "占比",
            // 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项
            type: "pictorialBar",
            data: [],
            symbol:
              "image://",
            symbolSize: [100, 100],
            symbolPosition: "start",
            symbolOffset: ["0%", "-25%"],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: "red",
              },
            },
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              formatter: "{c}% \n\n {b}",
              color: "rgba(45, 153, 255, 1)",
              fontSize: "18px",
              offset: [0, -10],
            },
          },
        ],
      },
      option7_1: {
        color: ["#FFD700"], // 深蓝色和黄色
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: 30,
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
            maxValueSpan: 3,
            minValueSpan: 3,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
          
              fontSize: 11,
              interval: 0,
              width: "90",
              overflow: "break",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
               color: "#fff",
          
              fontSize: 16,
              formatter: "{value}%",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "占比",
            type: "pictorialBar",
            barCategoryGap: "-30%",
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2D99FF" },
                { offset: 1, color: "rgba(45, 153, 255, 0.35)" },
              ]),
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            label: {
              show: true,
              color: "#2D99FF",
              position: "top",
              formatter: "{c}%",
              fontWeight: "bold",
            },
            data: [],
          },
        ],
      },
      option8: {
        color: ["#FF6347"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
            maxValueSpan: 3,
            minValueSpan: 3,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
               color: "#fff",
          
              fontSize: 16,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              show: false,
            },
            axisLabel: {
               color: "#fff",
          
              fontSize: 16,
              formatter: "{value}%",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "占比",
            type: "pictorialBar",
            barCategoryGap: "-30%",
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "rgba(44, 217, 197, 1)" },
                { offset: 1, color: "rgba(124, 255, 240, 1)" },
              ]),
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            label: {
              show: true,
              color: "rgba(44, 217, 197, 1)",
              position: "top",
              formatter: "{c}%",
              fontWeight: "bold",
            },
            data: [],
          },
        ],
      },
      option8_1: {
        color: ["#FF6347"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: 30,
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
            maxValueSpan: 3,
            minValueSpan: 3,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
               color: "#fff",
          
              fontSize: 11,
              interval: 0,
              width: "90",
              overflow: "break",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              show: false,
            },
            axisLabel: {
               color: "#fff",
          
              fontSize: 16,
              formatter: "{value}%",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "占比",
            type: "bar",
            barWidth: "35px",
            data: [],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "rgba(44, 217, 197, 1)" },
                { offset: 1, color: "rgba(136, 252, 244, 1)" },
              ]),
            },
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
              color: "#2D99FF",
              fontSize: "16px",
              fontWeight: "bold",
            },
          },
        ],
      },
      option9: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: 30,
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
            maxValueSpan: 3,
            minValueSpan: 3,
            yAxisIndex: 0,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "value",
            data: [],
            min: 0,
            max: 100,
            axisTick: {
              alignWithLabel: true,
            },
            show: false,
            axisLine: {
              lineStyle: {
                color: "#fff", // 设置 x 轴线的颜色为红色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#fff", // 设置 x 轴线的颜色为红色
              },
            },
            axisLabel: {
              color: "rgba(255, 231, 0, 1)",
              fontSize: 16,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "rgba(255, 231, 0, 1)",
                fontSize: "16",
              },
              formatter: "{value}%",
            },
            data: [],
          },
        ],
        series: [
          {
            name: "占比",
            barWidth: "20%",
            type: "pictorialBar",
            symbol: "rich",
            symbolRepeat: true,
            symbolSize: [4, 8],
            symbolMargin: 1,
            data: [],
            itemStyle: {
              color: "rgba(255, 231, 0, 1)",
            },
            label: {
              show: false,
            },
          },
        ],
      },
      option9_1: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          top: 30,
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 x 轴使用)
            // start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            // height: 10, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: "10%", // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            zoomOnMouseWheel: false, // 滚轮是否触发缩放
            moveOnMouseMove: true, // 鼠标滚轮触发滚动
            moveOnMouseWheel: true,
            maxValueSpan: 3,
            minValueSpan: 3,
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: "solid", // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            bottom: 0,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
               color: "#fff",
          
              fontSize: 11,
              interval: 0,
              width: "90",
              overflow: "break",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              show: false,
            },
           
            axisLabel: {
               color: "#fff",
          
              fontSize: 16,
              formatter: "{value}%",
            },
            
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "占比",
            type: "pictorialBar",
            barCategoryGap: "-30%",
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FFE700" },
                { offset: 1, color: "rgba(255, 231, 0, 0.35)" },
              ]),
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            label: {
              show: true,
              color: "#FFE700",
              position: "top",
              formatter: "{c}%",
              fontWeight: "bold",
            },
            data: [],
          },
        ],
      },
      columnData: [
        {
          id: 1,
        },
        {
          id: 2,
        },
        {
          id: 3,
          title: "来料检验完成率",
          contextTitle: {
            text: "完成检验判定结果流程数量 / 总发起报检流程数量",
            textStyle: {
              fontSize: 14,
              color: "#fff",
            },
          },
        },
      ],
      columnData2: [{ id: 4 }, { id: 5 }, { id: 6 }],
      columnData3: [{ id: 7 }, { id: 8 }, { id: 9 }],
      echart3List: [],
    };
  },
  methods: {
    selfcontextmenu(chart, name, how, deleteMenu) {
      //去除默认的鼠标事件
      document.oncontextmenu = function () {
        return false;
      };
      document.onclick = function name(params) {
        var menu = document.getElementById("menus");
        menu.style.display = "none";
      };
      let that = this;
      chart.off("contextmenu");
      chart.off("click");
      // let myCharts = [this.echart1]
      // for (const iterator of myCharts) {
      // console.log(iterator)
      chart.on("contextmenu", function (params) {
        console.log(chart, name, how, deleteMenu);
        if (deleteMenu) return;
        console.log(params, chart, how);
        var oEvent = params.event;
        name == "echartDeep2"
          ? that.setDeepData(params, "echartDeep2", how)
          : that.setDeepData(params, "", how);
        var menu = document.getElementById("menus");
        menu.style.display = "block";
        menu.style.position = "absolute";
        menu.style.background = "#fff";
        menu.style.zIndex = 10000;
        // //让自定义菜单随鼠标的箭头位置移动
        let innerHeight, innerWidth, left, top;
        innerHeight = window.innerHeight;
        innerWidth = window.innerWidth;
        if (oEvent.event.screenX - 64 < 0) {
          left = 0;
        } else if (oEvent.event.screenX + 64 > innerWidth) {
          left = innerWidth - 64;
        } else {
          left = oEvent.event.screenX;
        }
        if (oEvent.event.clientY - 72 < 0) {
          top = 0;
        } else if (oEvent.event.clientY + 72 > innerHeight) {
          top = innerHeight - 72;
        } else {
          top = oEvent.event.clientY;
        }
        menu.style.left = left + "px";
        menu.style.top = top - 20 + "px";
      });
      // }

      chart.on("click", function (params) {
        console.log(chart, name, how, deleteMenu);
        if (deleteMenu) return;
        console.log(params, chart, how);
        var oEvent = params.event;
        name == "echartDeep2"
          ? that.setDeepData(params, "echartDeep2", how)
          : that.setDeepData(params, "", how);
        that.getinspectionJumpMateriallocal();
      });
    },
    getinspectionOKRatio(params) {
      return new Promise((resolve, reject) => {
        inspectionOKRatio(params).then((res) => {
          let xData = [];
          let yData = [];
          let divisionRatioList = res.data.divisionRatioList;
          this.divisionRatioList = divisionRatioList;
          for (const item of divisionRatioList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (key == "divisionName") {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          // this.option1.yAxis[0].data = xData;
          // this.option1.yAxis[1].data = yData;
          // this.option1.series[0].data = yData;
          // this.echart1 = this.echart1
          //   ? this.echart1
          //   : echarts.init(this.$refs.echart1);
          // this.echart1.setOption(this.option1);
          // // this.echartImg = this.myChart.getDataURL()
          // resolve(this.echart1);
          // window.addEventListener("resize", () => this.echart1.resize());
        });
      });
    },
    getinspectionDivisionBaseRatio(params, isSup) {
      return new Promise((resolve, reject) => {
        inspectionDivisionBaseRatio(params).then((res) => {
          let xData = [];
          let yData = [];
          let baseInfoRatioList = isSup
            ? res.data.supplierInfoRatioList
            : res.data.baseInfoRatioList;
          for (const item of baseInfoRatioList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (
                  (key == "baseName" && item[key]) ||
                  (key == "supplierName" && item[key])
                ) {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          this.option4.xAxis[0].data = xData;
          this.option4.series[0].data = yData;
          this.option4.series[1].data = yData;
          this.option4.series[2].data = yData;
          this.option4.series[3].data = yData;
          this.option4.series[4].data = yData;
          this.echart4 = this.echart4
            ? this.echart4
            : echarts.init(this.$refs.echart4);
          this.echart4.setOption(this.option4);
          console.log("option4", this.option4);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echart4);
          window.addEventListener("resize", () => this.echart4.resize());
        });
      });
    },
    getinspectionBaseMaterialRatio(params, isSup) {
      return new Promise((resolve, reject) => {
        inspectionBaseMaterialRatio(params).then((res) => {
          let xData = [];
          let yData = [];
          let materiRationInfoList = isSup
            ? res.data.supplierRatioInfoList
            : res.data.materiRationInfoList;
          this.materialRatioList7 = {
            materialRatioList7: materiRationInfoList,
            ...res.data,
          };
          for (const item of materiRationInfoList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (
                  (key == "materialLevelName" && item[key]) ||
                  (key == "materialTypeName" && item[key]) ||
                  (key == "supplierName" && item[key])
                ) {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          const optin = !isSup ? this.option7 : this.option7_1;

          optin.xAxis[0].data = xData;
          optin.series[0].data = yData;
          optin.yAxis[0].data = xData;
          if (!isSup) {
            optin.series[0].data = [];
            yData.forEach((item, index) => {
              optin.series[0].data.push({
                value: item,
                symbolSize: [100, 100],
                symbolPosition: "start",
                symbolOffset: [0, -50],
                itemStyle: {
                  normal: {
                    borderWidth: 0,
                    color: "red",
                  },
                },
                tooltip: {
                  show: false,
                },
                label: {
                  show: true,
                  formatter: "{c}% \n\n {b}",
                  color: "rgba(45, 153, 255, 1)",
                  fontSize: "18px",
                  position: "bottom",
                  offset: [0, -130],
                },
              });
            });
          }
          this.echart7 = this.echart7
            ? this.echart7
            : echarts.init(this.$refs.echart7);
          this.echart7.clear();
          if (isSup) {
            this.echart7.setOption(optin);
          } else {
            let temp = JSON.parse(JSON.stringify(optin));
            // delete temp.dataZoom;
            // temp.yAxis[0].min = 0;
            // temp.yAxis[0].max = 100;

            this.echart7.setOption(temp);
          }
          console.log("optin7", optin);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echart7);
          window.addEventListener("resize", () => this.echart7.resize());
        });
      });
    },
    getinspectionJumpMaterial(params) {
      return new Promise((resolve, reject) => {
        inspectionJumpMaterial(params).then((res) => {
          let xData = [];
          let yData = [];
          let materialRatioList = res.data.materialRatioList;
          this.materialRatioList7_2 = {
            materialRatioList7_2: materialRatioList,
            ...res.data,
          };
          for (const item of materialRatioList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (key == "materialName" && item[key]) {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          let echartDeepDom = document.getElementById("echartDeep");
          this.optionDeep.xAxis[0].data = xData;
          this.optionDeep.series[0].data = yData;
          this.echartDeep = this.echartDeep
            ? this.echartDeep
            : echarts.init(echartDeepDom);
          this.echartDeep.setOption(this.optionDeep);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echartDeep);
          window.addEventListener("resize", () => this.echartDeep.resize());
        });
      });
    },
    setDeepData(params, name, how) {
      name == "echartDeep2"
        ? (this.deep2Params = params)
        : (this.deepParams = params);
      this.currentDeepEchart = how;
      console.log(this.deepParams, this.deep2Params, this.currentDeepEchart);
      // inspectionJumpMaterial().then(res => {

      // })
    },
    getinspectionJumpMaterialSupplier(params) {
      return new Promise((resolve, reject) => {
        inspectionJumpMaterialSupplier(params).then((res) => {
          let xData = [];
          let yData = [];
          let supplierRatioInfoList = res.data.supplierRatioInfoList;
          for (const item of supplierRatioInfoList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (key == "supplierName" && item[key]) {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          let echartDeep2Dom = document.getElementById("echartDeep2");
          this.optionDeep2.xAxis[0].data = xData;
          this.optionDeep2.series[0].data = yData;
          this.echartDeep2 = this.echartDeep2
            ? this.echartDeep2
            : echarts.init(echartDeep2Dom);
          this.echartDeep2.setOption(this.optionDeep2);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echartDeep2);
          window.addEventListener("resize", () => this.echartDeep2.resize());
        });
      });
    },

    //
    getinspectionDivisionMrbRatio(params) {
      return new Promise((resolve, reject) => {
        inspectionDivisionMrbRatio(params).then((res) => {
          let xData = [];
          let yData = [];
          
          let divisionMrbResultList = res.data.divisionMrbResultList;
          this.echart3List = divisionMrbResultList;
          for (const item of divisionMrbResultList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (key == "divisionName") {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }

          // this.option3.series[0].data = [];
          // const maxY = Math.max(...yData);
          // yData.forEach((item, index) => {
          //   this.option3.series[0].data.push({
          //     value: item,
          //     symbolPosition: "start",
          //     symbolOffset: [0, index % 2 == 0 ? -30 : -100],
          //     label: {
          //       show: true,
          //       fontSize: 14,
          //       position: "bottom",
          //       offset: [0, index % 2 == 0 ? -70 : -140],
          //       formatter: `{c}%\n\n\n${xData[index]}`,
          //     },
          //   });
          // });
          // this.echart3 = this.echart3
          //   ? this.echart3
          //   : echarts.init(this.$refs.echart3);
          // this.echart3.setOption(this.option3);
          // console.log("option3", this.option3);
          // // this.echartImg = this.myChart.getDataURL()
          // resolve(this.echart3);
          // window.addEventListener("resize", () => this.echart3.resize());
        });
      });
    },
    getinspectionDivisionBaseMrbRatio(params, isSup) {
      return new Promise((resolve, reject) => {
        (isSup == 1
          ? inspectionSupplierMrbRatio
          : inspectionDivisionBaseMrbRatio)(params).then((res) => {
          let xData = [];
          let yData = [];
          let baseMrbResultList =
            isSup == 1
              ? res.data.supplierResultList
              : res.data.baseMrbResultList;
          for (const item of baseMrbResultList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (
                  (key == "baseName" && !isSup) ||
                  (key == "supplierName" && isSup)
                ) {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          this.option6.xAxis[0].data = xData;
          this.option6.xAxis[1].data = yData;
          // this.option6.yAxis[0].min = (Math.min(...yData) - 5).toFixed(0);
          // this.option6.yAxis[0].max = 100;
          this.option6.series[0].data = yData;
          this.option6.series[1].data = yData;
          // this.option6.series[2].data = yData;

          // this.option6.series[3].data = yData;
          this.echart6 = this.echart6
            ? this.echart6
            : echarts.init(this.$refs.echart6);
          this.echart6.setOption(this.option6);
          console.log("option6", this.option6);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echart6);
          window.addEventListener("resize", () => this.echart6.resize());
        });
      });
    },
    getinspectionMaterialMrbRatio(params, isSup) {
      return new Promise((resolve, reject) => {
        (isSup == 1
          ? inspectionDivisionSupplierMrbRatio
          : inspectionMaterialMrbRatio)(params).then((res) => {
          let xData = [];
          let yData = [];
          // let materialResultList = res.data.materialResultList;
          let baseMrbResultList =
            isSup == 1
              ? res.data.supplierResultList
              : res.data.materialResultList;
          this.materialRatioList8 = {
            materialRatioList8: baseMrbResultList,
            ...res.data,
          };
          for (const item of baseMrbResultList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (
                  (key == "supplierName" && item[key]) ||
                  (key == "materialLevelName" && item[key]) ||
                  (key == "materialTypeName" && item[key])
                ) {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          const optin = !isSup ? this.option9 : this.option9_1;
          if (!isSup) {
            xData = xData.reverse();
            yData = yData.reverse();
            optin.yAxis[0].data = xData;
            optin.yAxis[1].data = yData;
          } else {
            optin.xAxis[0].data = xData;
          }
          optin.series[0].data = yData;
          this.echart9 = this.echart9
            ? this.echart9
            : echarts.init(this.$refs.echart9);
          this.echart9.clear();
          // if (isSup) {
          this.echart9.setOption(optin);
          // } else {
          //   let temp = JSON.parse(JSON.stringify(optin));
          //   // delete temp.dataZoom;
          //   temp.yAxis[0].min = 0;
          //   temp.yAxis[0].max = 100;
          //   this.echart9.setOption(temp);
          // }
          console.log("optin9", optin);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echart9);
          window.addEventListener("resize", () => this.echart9.resize());
        });
      });
    },
    getinspectionMaterialMrbRatioDeep(params, isSup) {
      return new Promise((resolve, reject) => {
        (isSup == 1
          ? inspectionDivisionSupplierMrbRatio
          : inspectionMaterialMrbRatio)(params).then((res) => {
          let xData = [];
          let yData = [];
          // let materialResultList = res.data.materialResultList;
          let baseMrbResultList =
            isSup == 1
              ? res.data.materialResultList
              : res.data.materialResultList;
          this.materialRatioList8_2 = {
            materialRatioList8_2: baseMrbResultList,
            ...res.data,
          };
          for (const item of baseMrbResultList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (key == "materialName" && item[key]) {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push(Number(item[key]) * 100);
                }
              }
            }
          }
          let echartDeepDom = document.getElementById("echartDeep");
          this.optionDeep.xAxis[0].data = xData;
          this.optionDeep.series[0].data = yData;
          this.echartDeep = this.echartDeep
            ? this.echartDeep
            : echarts.init(echartDeepDom);
          this.echartDeep.setOption(this.optionDeep);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echartDeep);
          window.addEventListener("resize", () => this.echartDeep.resize());
        });
      });
    },
    getinspectionMaterialMrbRatioDeep2(params) {
      return new Promise((resolve, reject) => {
        inspectionMaterialMrbRatio(params).then((res) => {
          let xData = [];
          let yData = [];
          let supplierRatioInfoList = res.data.supplierResultList;
          for (const item of supplierRatioInfoList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (key == "supplierName" && item[key]) {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          let echartDeep2Dom = document.getElementById("echartDeep2");
          this.optionDeep2.xAxis[0].data = xData;
          this.optionDeep2.series[0].data = yData;
          this.echartDeep2 = this.echartDeep2
            ? this.echartDeep2
            : echarts.init(echartDeep2Dom);
          this.echartDeep2.setOption(this.optionDeep2);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echartDeep2);
          window.addEventListener("resize", () => this.echartDeep2.resize());
        });
      });
    },

    //
    getinspectionFinishRateByExtra(params) {
      return new Promise((resolve, reject) => {
        inspectionFinishRateByExtra(params).then((res) => {
          let xData = [];
          let yData = [];
          let divisionMrbResultList = res.data;
          for (const item of divisionMrbResultList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (key == "factoryName") {
                  xData.push(item[key]);
                } else if (key == "rate") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          xData = xData.reverse();
          yData = yData.reverse();
          this.option2.yAxis[0].data = xData;
          this.option2.yAxis[1].data = yData;
          this.option2.series[0].data = yData;
          this.echart2 = this.echart2
            ? this.echart2
            : echarts.init(this.$refs.echart2);
          this.echart2.setOption(this.option2);
          console.log(this.option2);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echart2);
          window.addEventListener("resize", () => this.echart2.resize());
        });
      });
    },
    getbaseInsFinishRateByExtra(params, isSup) {
      return new Promise((resolve, reject) => {
        (isSup == 1 ? supplierInsFinishRateByExtra : baseInsFinishRateByExtra)({
          ...params,
          divisionId: this.queryParams.divisionId,
          divisionIdList: this.queryParams.divisionId,
        }).then((res) => {
          let xData = [];
          let yData = [];
          let divisionMrbResultList = res.data;
          for (const item of divisionMrbResultList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (
                  (key == "baseName" && item[key]) ||
                  (key == "supplierName" && item[key])
                ) {
                  xData.push(item[key]);
                } else if (key == "rate") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          this.option5.xAxis[0].data = xData;
          this.option5.series[0].data = yData;
          this.echart5 = this.echart5
            ? this.echart5
            : echarts.init(this.$refs.echart5);
          this.echart5.setOption(this.option5);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echart5);
          window.addEventListener("resize", () => this.echart5.resize());
          // this.option6.xAxis[0].data = xData;
          // this.option6.xAxis[1].data = yData;
          // this.option6.yAxis[0].min = (Math.min(...yData) - 5).toFixed(0);
          // this.option6.yAxis[0].max = 100;
          // this.option6.series[0].data = yData;
          // this.option6.series[1].data = yData;
          // // this.option6.series[2].data = yData;

          // // this.option6.series[3].data = yData;
          // this.echart6 = this.echart6
          //   ? this.echart6
          //   : echarts.init(this.$refs.echart6);
          // this.echart6.setOption(this.option6);
          // console.log("option6", this.option6);
          // // this.echartImg = this.myChart.getDataURL()
          // resolve(this.echart6);
          // window.addEventListener("resize", () => this.echart6.resize());
        });
      });
    },
    getsupplierInsFinishRateByExtra(params, isSup) {
      return new Promise((resolve, reject) => {
        isSup == 1 ? delete params.divisionIdList : "";
        (isSup == 1 ? supplierInsFinishRateByExtra : materialLevel)(
          params
        ).then((res) => {
          let xData = [];
          let yData = [];
          let materiRationInfoList =
            isSup == 1 ? res.data : res.data.materialResultList;
          this.materialRatioList9 = {
            materialRatioList9: materiRationInfoList,
          };
          isSup == 1
            ? ((this.materialRatioList9.inspectionEndTime =
                res.data[0]?.endTime),
              (this.materialRatioList9.inspectionStartTime =
                res.data[0]?.beginTime))
            : (this.materialRatioList9 = {
                ...this.materialRatioList9,
                ...res.data,
              });
          for (const item of materiRationInfoList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (
                  (key == "materialLevelName" && item[key]) ||
                  (key == "supplierName" && item[key]) ||
                  (key == "materialTypeName" && item[key])
                ) {
                  xData.push(item[key]);
                } else if (key == "rate" || key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          const optin = !isSup ? this.option8 : this.option8_1;
          optin.xAxis[0].data = xData;
          optin.series[0].data = yData;
          this.echart8 = this.echart8
            ? this.echart8
            : echarts.init(this.$refs.echart8);
          this.echart8.clear();
          // if (isSup) {
          this.echart8.setOption(optin);
          // } else {
          //   let temp = JSON.parse(JSON.stringify(optin));
          //   delete temp.dataZoom;
          //   temp.yAxis[0].min = 0;
          //   temp.yAxis[0].max = 100;
          //   this.echart8.setOption(temp);
          // }
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echart8);
          window.addEventListener("resize", () => this.echart8.resize());
        });
      });
    },
    getmaterialInsFinishRateByExtraDeep(params, isSup) {
      return new Promise((resolve, reject) => {
        (isSup == 1 ? materialInsFinishRateByExtra : materialLevel)(
          params
        ).then((res) => {
          let xData = [];
          let yData = [];
          // let materialResultList = res.data.materialResultList;
          let baseMrbResultList =
            isSup == 1 ? res.data : res.data.materialResultList;
          this.materialRatioList9_2 = baseMrbResultList;
          console.log(baseMrbResultList);
          for (const item of baseMrbResultList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (
                  (key == "materialName" && item[key]) ||
                  (key == "materialTypeName" && item[key])
                ) {
                  xData.push(item[key]);
                } else if (key == "ratio" || key == "rate") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          console.log(xData, yData);
          let echartDeepDom = document.getElementById("echartDeep");
          this.optionDeep.xAxis[0].data = xData;
          this.optionDeep.series[0].data = yData;
          this.echartDeep = this.echartDeep
            ? this.echartDeep
            : echarts.init(echartDeepDom);
          this.echartDeep.setOption(this.optionDeep);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echartDeep);
          window.addEventListener("resize", () => this.echartDeep.resize());
        });
      });
    },
    getmaterialLevelDeep2(params) {
      return new Promise((resolve, reject) => {
        materialLevel(params).then((res) => {
          let xData = [];
          let yData = [];
          let supplierRatioInfoList = res.data.supplierResultList;
          for (const item of supplierRatioInfoList) {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if (key == "supplierName" && item[key]) {
                  xData.push(item[key]);
                } else if (key == "ratio") {
                  yData.push((Number(item[key]) * 100).toFixed(1));
                }
              }
            }
          }
          let echartDeep2Dom = document.getElementById("echartDeep2");
          this.optionDeep2.xAxis[0].data = xData;
          this.optionDeep2.series[0].data = yData;
          this.echartDeep2 = this.echartDeep2
            ? this.echartDeep2
            : echarts.init(echartDeep2Dom);
          this.echartDeep2.setOption(this.optionDeep2);
          // this.echartImg = this.myChart.getDataURL()
          resolve(this.echartDeep2);
          window.addEventListener("resize", () => this.echartDeep2.resize());
        });
      });
    },
  },
};
